<template>
  <div class="recordBet hideScrollBar" ref="scrollEl">
    <div class="recordBet-bg"></div>
    <!-- 导航 -->
    <NavBar
      isFixed
      :title="pageTitle"
      isTransparent
      :navScorllOffset="60"
      navScorllColor="#fff"
      :scrollEl="scrollEl"
    />
    <div class="contentview">
      <div
        v-if="!pageData.loading && pageData.list.length === 0"
        class="contentview-notdata items-center"
      >
        <img class="contentview-notdata-img" src="/image/notdate-icon.png" />
        <div class="contentview-notdata-desc">{{ t("mvp.other.zwnr") }}</div>
      </div>
      <ClientOnly v-else>
        <!-- 头部信息 -->
        <div class="header" v-if="pageData.list.length > 0">
          <!-- 本期奖池 -->
          <div class="header-top items-center">
            <div class="header-top-title">{{ $t("lotteryMoney.dqjc") }}</div>
            <div class="header-top-value">
              ${{ toThousands(decimalToLength(pageData.lotteryPoolAmount)) }}
            </div>
          </div>
          <!-- 四宫格 -->
          <div
            class="items-center"
            style="
              justify-content: space-between;
              margin-top: 6px;
              margin-bottom: 20px;
            "
          >
            <!-- 下注 BDC -->
            <div class="header-item">
              <div class="header-item-value">
                {{
                  toThousands(decimalToLength(pageData.currentTotalCostAmount))
                }}
              </div>
              <div class="header-item-title">
                {{ $t("lotteryMoney.xzbdcsl") }}
              </div>
            </div>
            <!-- 上期滚动奖金 -->
            <div class="header-item">
              <div class="header-item-value">
                ${{
                  toThousands(decimalToLength(pageData.lastSessionMoveAmount))
                }}
              </div>
              <div class="header-item-title">
                {{ $t("lotteryMoney.sqgdjj") }}
              </div>
            </div>
          </div>
          <div class="items-center" style="justify-content: space-between">
            <div class="header-item">
              <div class="header-item-value">
                {{ toThousands(decimalToLength(pageData.sessionUserCount, 0)) }}
              </div>
              <div class="header-item-title">{{ $t("lotteryMoney.xzrs") }}</div>
            </div>
            <div class="header-item">
              <div class="header-item-value">
                {{
                  toThousands(
                    decimalToLength(pageData.sessionTotalDrawCount || 0, 0)
                  )
                }}
              </div>
              <div class="header-item-title">
                {{ $t("lotteryMoney.xzsl") }}
              </div>
            </div>
          </div>
        </div>
        <!-- 列表 -->
        <div class="list">
          <div class="list-top items-center" v-if="pageData.list.length > 0">
            <div class="list-top-value">{{ $t("lotteryMoney.user") }}</div>
            <div class="list-top-value">{{ $t("lotteryMoney.userhf") }}</div>
          </div>
          <van-list
            v-model:loading="pageData.loading"
            :finished="pageData.finished"
            :finished-text="t('mvp.other.text4')"
            :loading-text="t('mvp.other.text11')"
            @load="onLoadList"
          >
            <div
              v-for="(item, index) in pageData.list"
              :key="item.orderNo"
              class="list-item"
            >
              <div class="list-item-top items-center">
                <ImgNuxt
                  class="list-item-avatar"
                  isHttp
                  :placeholder="file.avatarDefault"
                  :src="item.avatar || file.avatarDefault"
                />
                <div class="list-item-right">
                  <div
                    class="items-center"
                    style="justify-content: space-between; margin-bottom: 3px"
                  >
                    <div class="list-item-right-title">
                      {{
                        item.nickname ? item.nickname.substring(0, 11) : "--"
                      }}
                      {{
                        item.nickname && item.nickname.length > 11 ? "..." : ""
                      }}
                    </div>
                    <div class="list-item-right-BDC">
                      {{ toThousands(decimalToLength(item.costAmount)) }} BDC
                    </div>
                  </div>
                  <div
                    class="items-center"
                    style="justify-content: space-between"
                  >
                    <div class="list-item-right-sid">
                      {{ item.sid ? item.sid.substring(3, 100) : "--" }}
                    </div>
                    <div class="list-item-right-time">
                      {{
                        useDateFormat(
                          Number(item.drawTime),
                          "YYYY-MM-DD HH:mm:ss"
                        ).value
                      }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="list-item-bottom items-center">
                <div class="list-item-bottom-left items-center">
                  <div class="list-item-bottom-left-title">Hash:</div>
                  <div
                    class="list-item-bottom-left-value"
                    v-if="item.transactionHash"
                  >
                    <!-- @click.stop="jumpPage('webview1', false, item.url)" -->
                    <span
                      @click.stop="jumpPage('webview1', item.transactionHash)"
                    >
                      {{ item.transactionHash.substring(0, 4) }}***{{
                        item.transactionHash.substring(
                          item.transactionHash.length - hashScoreLength,
                          item.transactionHash.length
                        )
                      }}
                    </span>

                    <img
                      class="list-item-bottom-left-value-copy"
                      src="/image/lotterymoney/mybet-copy.svg"
                      @click.stop="getCopy(item.transactionHash)"
                    />
                  </div>
                  <div class="list-item-bottom-left-value" v-else>
                    {{
                      !item.hashStatus
                        ? "--"
                        : item.hashStatus == 1
                        ? $t("lotteryMoney.slz")
                        : "--"
                    }}
                  </div>
                </div>
                <div class="list-item-bottom-right">
                  <!-- {{ $t("lotteryMoney.value") }}: {{ item.hashScore || "--" }} -->
                  {{
                    item.teamConfigId == 1
                      ? $t("lotteryMoney.redTeam")
                      : item.teamConfigId == 2
                      ? $t("lotteryMoney.yellowTeam")
                      : $t("lotteryMoney.blueTeam")
                  }}
                  {{ $t("lotteryMoney.team") }}
                </div>
              </div>
            </div>
          </van-list>
        </div>
      </ClientOnly>
    </div>
  </div>
</template>
<script setup name="recordBet">
import { getOssFileUrl, toThousands, decimalToLength } from "@/utils";
import { getSessionBettingRecord } from "../../api/lottery";
import { useDateFormat, useClipboard } from "@vueuse/core";
import { BDC_blockchain_Host } from "@/config";

const { t } = useI18n();

// 资源
const file = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
});

const route = useRoute();
console.log("页面参数:", route.query);
const scrollEl = ref();
// firebase埋点
const firebase = useInitFirebase(); // 初始化firebase

// 页面属性
const pageData = reactive({
  loading: false,
  finished: false,
  list: [],
  pageNum: 1,
  total: 2000,
  lastSessionMoveAmount: 0, // 上期滚动奖金
  currentTotalCostAmount: 0, // 当前下注BDC
  lotteryPoolAmount: 0, //  奖池
  sessionUserCount: 0, // 下注
  sessionTotalDrawCount: 0, // 下注
});

const pageTitle = computed(() => {
  // if (route.query.beginTime) {
  //   return `${formatWithTimeZone(route.query.beginTime, "Asia/Jakarta")} ${t(
  //     "lotteryMoney.xzjl"
  //   )}`;
  // }
  return t("lotteryMoney.xzjl");
});

// 显示长度
const hashScoreLength = computed(() => {
  if (route.query && route.query.hashScoreLength) {
    return Number(route.query.hashScoreLength);
  }
  return 6;
});

// 上啦加载
const onLoadList = () => {
  pageData.pageNum += 1;
  getSessionBettingRecordRequest((isAdd) => {
    if (!isAdd) {
      pageData.pageNum -= 1;
    }
  });
};
// 获取列表数据
const getSessionBettingRecordRequest = async (call) => {
  pageData.loading = true;
  const res = await getSessionBettingRecord({
    sessionId: route.query.sessionId,
    pageNum: pageData.pageNum,
    pageSize: 20,
    searchStatistics: 1, // 是否返回统计信息 0:不返回 1:返回
  });
  // console.log("--获取文章列表--", res);
  pageData.loading = false;
  if (res) {
    let majorList = [];
    majorList = res.records.map((e, index) => {
      e.createdTime = useDateFormat(
        Number(e.createdAt),
        "YYYY-MM-DD HH:mm:ss"
      ).value;
      return e;
    });
    pageData.lastSessionMoveAmount = res.lastSessionMoveDollarAmount; // 上期滚动奖金
    pageData.currentTotalCostAmount = res.currentTotalCostBdcAmount; // 当前下注BDC
    pageData.list = pageData.list.concat(majorList);
    // 后端无法返回 total,如果数据不够 20 条就算作最后一页了
    if (res.records.length < 20) {
      pageData.total = pageData.list.length;
      pageData.finished = true;
    }
    if (res.records && res.records.length > 0) {
      call && call(true);
    } else {
      call && call(false);
    }
  }
  // 失败重试当前这一页数据
  else {
    call && call(false);
  }
};

onMounted(() => {
  firebase?.logEvent("BDC_H5_recordBet_PUV");
  pageData.lotteryPoolAmount = route.query.lotteryPoolAmount;
  pageData.sessionUserCount = route.query.sessionUserCount;
  pageData.sessionTotalDrawCount = route.query.sessionTotalDrawCount;
  getSessionBettingRecordRequest();
});

/**
 * @description: 获取剪贴板内容
 */
const getCopy = (val) => {
  if (!val) return;
  const { copy, isSupported } = useClipboard({
    source: "",
  });
  if (!isSupported.value) {
    showToast(t("mvp.other.bzcjtb"));
  } else {
    copy(val);
    showToast(t("mvp.other.fzcg"));
  }
};

// 点击-页面跳转
const jumpPage = async (val, params) => {
  if (val === "webview1" && params) {
    bridge.defaultBrowserOpen(`${BDC_blockchain_Host}${params}`);
    // navigateI18nTo({
    //   path: "/webview",
    //   query: {
    //     src: `${BDC_blockchain_Host}${params}`,
    //     title: t("lotteryMoney.hashPage"),
    //     isShow: 1,
    //   },
    // });
  }
};

// 期数格式化
const formatWithTimeZone = (date, timeZone) => {
  const yearFormatter = new Intl.DateTimeFormat("en-US", {
    year: "numeric",
    timeZone: timeZone,
  });
  const monthFormatter = new Intl.DateTimeFormat("en-US", {
    month: "numeric",
    timeZone: timeZone,
  });
  const dayFormatter = new Intl.DateTimeFormat("en-US", {
    day: "numeric",
    timeZone: timeZone,
  });
  const year = yearFormatter.format(new Date(Number(date)));
  const month = monthFormatter.format(new Date(Number(date)));
  const day = dayFormatter.format(new Date(Number(date)));

  return `${year}.${month}.${day}`;
};
</script>
<style lang="scss" scoped>
.list {
  position: relative;
  z-index: 9;
  margin: 0 15 * 2px;
  // padding-bottom: 20 * 2px;
  background: #fff;
  border-radius: 12 * 2px;
  overflow: hidden;

  &-top {
    padding: 12 * 2px 10 * 2px;
    justify-content: space-between;
    background-color: #f3f9ff;
    &-value {
      font-size: 11 * 2px;
      color: #999da7;
    }
  }
  &-item {
    padding: 12 * 2px 10 * 2px;
    border-bottom: 2px solid rgba(115, 119, 128, 0.15);
    &-top {
      margin-bottom: 12 * 2px;
    }
    &-bottom {
      justify-content: space-between;
      padding: 4.5 * 2px 10 * 2px;
      border-radius: 100px;
      background: #f0f3fa;
      &-left {
        &-title {
          font-size: 13 * 2px;
          color: #999da7;
        }
        &-value {
          margin-left: 5 * 2px;
          font-size: 13 * 2px;
          color: #007bff;
          &-copy {
            margin-left: 5 * 2px;
            width: 15 * 2px;
            height: 15 * 2px;
          }
        }
      }
      &-right {
        font-size: 13 * 2px;
        color: #141924;
      }
    }
    &-avatar {
      width: 36 * 2px;
      height: 36 * 2px;
      border-radius: 100px;
      overflow: hidden;
      margin-right: 4 * 2px;
    }
    &-right {
      flex: 1;
      &-title {
        font-size: 13 * 2px;
        color: #141924;
        font-weight: 510;
      }
      &-BDC {
        font-size: 13 * 2px;
        color: #141924;
        font-weight: 510;
      }
      &-sid {
        font-size: 12 * 2px;
        color: #999da7;
      }
      &-time {
        font-size: 12 * 2px;
        color: #999da7;
      }
    }
  }
}
.header {
  position: relative;
  z-index: 9;
  margin: 30 * 2px 15 * 2px 10 * 2px 15 * 2px;
  padding: 16 * 2px 10 * 2px;
  border-radius: 12 * 2px;
  background: linear-gradient(90deg, #007bff 0.34%, #00b2ff 100%);
  &-top {
    // display: -webkit-inline-box;
    position: absolute;
    top: -11 * 2px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2 * 2px 15 * 2px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    justify-content: space-between;
    max-width: 95%;
    &-title {
      text-wrap: nowrap !important;
      white-space: nowrap;
      font-size: 13 * 2px;
      color: #002853;
    }
    &-value {
      margin-left: 5 * 2px;
      font-size: 15 * 2px;
      color: #007bff;
      font-weight: 590;
    }
  }
  &-item {
    width: 50%;
    &-value {
      font-size: 14 * 2px;
      color: #fff;
      font-weight: 500;
      margin-bottom: 4 * 2px;
    }
    &-title {
      color: rgba(255, 255, 255, 0.7);
      font-size: 11 * 2px;
    }
  }
}
.recordBet {
  position: relative;
  height: 100vh;
  background-color: #f0f3fa;
  overflow-y: scroll;
  overflow-x: hidden;
  &-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 300 * 2px;
    background: linear-gradient(
      180deg,
      #96c9ff 0%,
      rgba(236, 245, 255, 0) 100%
    );
  }
  .contentview {
    padding-bottom: var(--safe-area-inset-bottom);
    &-notdata {
      justify-content: center;
      flex-direction: column;
      position: relative;
      top: 120 * 2px;
      &-img {
        width: 200 * 2px;
        height: 200 * 2px;
        margin-bottom: 5px;
      }
      &-desc {
        color: #999da7;
        font-size: 13 * 2px;
      }
    }
  }
}
</style>
